<template>
  <div class="container">
    <div class="header">
      <van-icon
        class="header-left"
        name="arrow-left"
        size="30"
        @click="goBack"
      />
      请填写订单
    </div>
    <statusBar item="0" />
    <van-cell-group class="cell">
      <van-cell>
        <template #title>
          <van-image
            width="25"
            height="25"
            :src="initData.service.serviceImg"
          />
          <span class="server-name">{{ initData.service.serviceName }}</span>
        </template>
        <template #default>
          <div class="service-text">服务内容</div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-form @submit="onSubmit">
      <van-cell-group class="cell">
        <van-cell title="就诊医院">
          <template #default>
            <div @click="hosBottom = true">
              {{ form.hospital_name || "请选择就诊医院"
              }}<van-icon name="arrow" />
            </div>
          </template>
        </van-cell>
        <van-cell title="就诊时间">
          <template #default>
            <div @click="timeBottom = true">
              {{ currentDate || "请选择就诊时间" }}<van-icon name="arrow" />
            </div>
          </template>
        </van-cell>
        <van-cell title="陪诊师">
          <template #default>
            <div @click="companionBottom = true">
              {{ companionName || "请选择陪诊师" }}<van-icon name="arrow" />
            </div>
          </template>
        </van-cell>
        <van-cell title="接送地址">
          <template #default>
            <van-field
              class="text"
              v-model="form.receiveAddress"
              input-align="right"
              placeholder="请填写就诊人地址"
              :rules="[{ required: true, message: '请填写就诊人地址' }]"
            />
          </template>
        </van-cell>
        <van-cell title="联系电话">
          <template #default>
            <van-field
              class="text"
              v-model="form.tel"
              input-align="right"
              placeholder="请填写您的联系电话"
              :rules="[{ pattern, message: '请填写正确得电话号码' }]"
            />
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group title="服务需求" class="cell">
        <van-cell>
          <template #default>
            <van-field
              :autosize="{ maxHeight: 150, minHeight: 100 }"
              v-model="form.demand"
              class="text"
              type="textarea"
              placeholder="请简单描述您要就诊得科室"
            />
          </template>
        </van-cell>
      </van-cell-group>
      <van-button class="submit" block type="primary" native-type="submit">
        提交
      </van-button>
    </van-form>

    <!-- 选择就诊医院弹出层 -->
    <van-popup v-model:show="hosBottom" position="bottom">
      <van-picker
        :columns="hosColumns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <!-- 选择就诊时间弹出层 -->
    <van-popup v-model:show="timeBottom" position="bottom">
      <van-date-picker
        title="选择日期"
        :min-date="minDate"
        @confirm="onTimeConfirm"
        @cancel="timeBottom = false"
      />
    </van-popup>
    <!-- 选择陪诊师弹出层 -->
    <van-popup v-model:show="companionBottom" position="bottom">
      <van-picker
        :columns="companionColumns"
        @confirm="onCompanionConfirm"
        @cancel="companionBottom = false"
      />
    </van-popup>
    <!-- 支付二维码 -->
    <van-dialog v-model:show="showCode" :showConfirmButton="false">
      <van-icon name="cross" class="close" @click="closeCode"/>
      <div>微信支付</div>
      <van-image width="100" height="100" :src="codeUrl" />
      <div>请使用本人微信扫描二维码</div>
    </van-dialog>
  </div>
</template>

<script setup>
import statusBar from "../../components/statusBar.vue";
import { useRouter } from "vue-router";
import { getCompanion, createOrder } from "../../api";
import { computed, onMounted, reactive, ref } from "vue";
import QRCode from "qrcode";

// 定义页面初始化数据
const initData = reactive({
  companion: [],
  hospitals: [],
  service: [],
});

onMounted(() => {
  getCompanion().then(({ data }) => {
    if (data.code === 10000) {
      // initData.value = data.data
      Object.assign(initData, data.data);
      console.log(initData, "createOrder页面初始化数据");
    }
  });
});

const router = useRouter();
// 返回点击事件
const goBack = () => {
  router.go(-1);
};
// 定义form表单数据
const form = reactive({
  hospital_id: "",
  hospital_name: "",
  demand: "",
  companion_id: 0,
  receiveAddress: "",
  tel: "",
  starttime: 0,
});

// 选择医院弹出层
const hosBottom = ref(false);
const hosColumns = computed(() => {
  return initData.hospitals.map((item) => {
    return { text: item.name, value: item.id };
  });
});
const onConfirm = ({ selectedOptions }) => {
  // console.log(selectedOptions);
  form.hospital_id = selectedOptions[0].value;
  form.hospital_name = selectedOptions[0].text;
  // console.log(selectedOptions);
  onCancel();
};
const onCancel = () => {
  hosBottom.value = false;
};

// 选择就诊时间
const timeBottom = ref(false);
const currentDate = ref();
const minDate = ref(new Date());
const onTimeConfirm = (item) => {
  // console.log(item);

  const dateStr = item.selectedValues.join("-");
  currentDate.value = dateStr;
  form.starttime = new Date(dateStr).getTime();
  //   console.log(form.starttime);
  timeBottom.value = false;
};

// 选择陪诊师
const companionBottom = ref(false);
const companionColumns = computed(() => {
  return initData.companion.map((item) => {
    return { text: item.name, value: item.id };
  });
});
const companionName = ref("");
const onCompanionConfirm = ({ selectedOptions }) => {
  form.companion_id = selectedOptions[0].value;
  companionName.value = selectedOptions[0].text;
  // console.log(form.companion_id);
  companionBottom.value = false;
};

// 电话号码校验正则
const pattern = /^((1[3-9]\d{9})|(\d{3,4}-\d{7,8}))$/;

// 提交按钮
const showCode = ref(false);
const codeUrl = ref();
const onSubmit = () => {
  console.log("form", form);
  const require = ["hospital_id", "companion_id", "starttime"];
  for (let i of require) {
    // console.log(i);
    if (!form[i]) {
      return showNotify({ type: "danger", message: "请将所需内容填写完善" });
    }
  }
  createOrder(form).then(({ data }) => {
    console.log(data, "data");

    QRCode.toDataURL(data.data.wx_code).then((url) => {
      // console.log(url);
      showCode.value = true;
      codeUrl.value = url;
    });
  });
};
const closeCode = ()=>{
    showCode.value = false;
    router.push('/order')
}
</script>

<style lang="less" scoped>
.text {
  padding: 0;
}
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }
  .server-name {
    margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.submit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
